<template>
    <div>
        <Card style="width:100%;margin-bottom: 15px;">
            <template #title>
                <h3>平台账户</h3>
            </template>
            <template #extra>
                <div @click="$router.push('/home/Profile')" style="cursor: pointer;">
                    <Icon type="ios-cog" />
                    账户设置
                </div>
            </template>
            <div class="rate-demo">
                <div>收益总额（元）</div>
                <h1>{{ userMoney.totalSalary || 0.00 }}</h1>
            </div>
            <div class="rate_price">
                <div class="pricei">
                    <div>可提现金额（元）</div>
                    <div>{{ userMoney.money || 0.00 }}</div>
                </div>
                <div class="pricei">
                    <div>冻结金额（元）</div>
                    <div>{{ userMoney.applySalary || 0.00 }}</div>
                </div>
            </div>
        </Card>
        <Tabs type="card">
            <TabPane label="收益记录">
                <Table border :columns="incomeColumns" :data="incomeData">
                    <template #state="{ row }">
                        <strong>{{stateArr.find(x => x.value == row.state).name}}</strong>
                    </template>
                    <template #orderState="{ row }">
                        <strong>{{ getOrderState(row.orderState) }}</strong>
                    </template>
                </Table>
                <Page style="float: right;margin-top: 10px;" :total="incomeDataTotal" show-sizer />
            </TabPane>
            <TabPane label="提现记录">
                <Table border :columns="WithdrawalColumns" :data="WithdrawalData"></Table>
                <Page style="float: right;margin-top: 10px;" :total="WithdrawalTotal" show-sizer />
            </TabPane>
        </Tabs>
    </div>
</template>

<script>
import { getOrderApportion, getUserMoney, getTixianList } from "@/api/writer/index";
export default {
    name: "IncomeDetails",
    data() {
        return {
            incomeColumns: [
                {
                    title: '编号',
                    width: 70,
                    align: 'center',
                    key: 'id'
                },
                {
                    title: '订单编号',
                    align: 'center',
                    key: 'orderNum'
                },
                {
                    title: '订单金额',
                    align: 'center',
                    key: 'price'
                },
                {
                    title: '完成时间',
                    align: 'center',
                    key: 'completeTime'
                },
                {
                    title: '结算时间',
                    align: 'center',
                    key: 'settlementTime'
                },
                {
                    title: '状态',
                    align: 'center',
                    slot: 'orderState'
                },
                {
                    title: '订单状态',
                    align: 'center',
                    slot: 'state'
                }
            ],
            WithdrawalColumns: [
                {
                    title: '编号',
                    width: 70,
                    align: 'center',
                    key: 'id'
                },
                {
                    title: '账户名称',
                    align: 'center',
                    key: 'accountName'
                },
                {
                    title: '提现方式',
                    align: 'center',
                    key: 'accountType'
                },
                {
                    title: '提现账号',
                    align: 'center',
                    key: 'accountNumber'
                },
                {
                    title: '提现金额·元',
                    align: 'center',
                    key: 'money'
                },
                {
                    title: '收支时间',
                    align: 'center',
                    key: 'createTime'
                }
            ],
            stateArr: [
                {
                    value: 0,
                    name: '待验收'
                },
                {
                    value: 10,
                    name: '验收通过'
                },
                {
                    value: 20,
                    name: '尾款支付'
                },
                {
                    value: 30,
                    name: '验收驳回'
                },
            ],
            incomeData: [],
            incomeDataTotal: 0,
            WithdrawalTotal: 0,
            WithdrawalData: [],
            params: {
                pageNum: 1,
                pageSize: 10,
                state: -1
            },
            userMoney: {}
        }
    },
    methods: {
        GetOrderApportion() {
            getOrderApportion(this.params).then(res => {
                if (res.code == 200) {
                    this.incomeData = res.data.records;
                    this.total = res.data.total;
                    this.params.pageNum = res.data.pages;
                    this.params.pageSize = res.data.size;
                }
            })
        },
        GetUserMoney() {
            getUserMoney().then(res => {
                if (res.code == 200) {
                    this.userMoney = res.data

                }
            })
        },
        GetTixianList() {
            getTixianList(this.params).then(res => {
                if (res.code == 200) {
                    this.WithdrawalData = res.data.records;
                    this.WithdrawalTotal = res.data.total;
                    this.params.pageNum = res.data.pages;
                    this.params.pageSize = res.data.size;
                }
            })
        },
        getOrderState(state) {
            if (state >= 50 && state < 70) {
                return '冻结'
            } else if (state == 70) {
                return '已结算'
            }
        }
    },
    mounted() {
        this.GetOrderApportion()
        this.GetUserMoney()
        this.GetTixianList()
    },
    components: {

    },
};
</script>

<style scoped lang="scss">
.add-box {
    margin: 40px 0;
}

.rate-demo {
    display: flex;
    justify-content: center;
    flex-direction: column;
    font-size: 15.6px;
}

.rate_price {
    background-color: #f8f8f9;
    border-radius: 5px;
    padding: 10px;
    display: grid;
    grid-template-columns: 4fr 4fr 4fr 4fr;
    grid-gap: 10px;

    .pricei {
        padding: 10px;
        border-right: 1px solid #e5e5e5;

    }

}

.pricei:last-child() {
    padding: 10px;
    border: 0;
}
</style>